<template>
  <!-- 这是我的页面 -->
  <div>
    <div v-if="isLogin">
      <!-- 用户信息 -->
      <van-cell class="member" title="单元格" is-link center to="login">
        <template #icon>
          <van-image class="van-avatar" :src="avatar" width="110px" height="110px" round></van-image>
        </template>

        <template #title>
          <span class="title">{{ user.name }}</span>
          <br>
          <span class="nick">用户昵称 : {{ nick_name }}</span>
        </template>
      </van-cell>
      <!-- 用户可以操作功能列表 -->
      <van-cell class="operation" icon="orders-o" title="订单" is-link :to="{ name: 'orderList' }"
                style="margin-top: 15px;margin-bottom: 15px"/>
      <van-cell class="operation" icon="location-o" title="地址" is-link :to="{ name: 'addressList' }"/>
      <van-cell class="operation" icon="point-gift-o" title="收藏" is-link :to="{ name: 'working' }"/>
      <van-cell class="operation" icon="edit" title="资料" is-link :to="{ name: 'profile' }"/>
      <van-cell class="operation" icon="replay" title="修改" is-link :to="{ name: 'updatePwd' }"/>
      <van-cell class="operation" @click="onClickLogout" icon="user-o" title="退出" is-link
                style="margin-top: 15px;margin-bottom: 15px"/>
    </div>
    <div v-else>
      <!-- 未登录 -->
      <van-cell class="member" title="单元格" is-link center to="login">
        <template #icon>
          <van-image :src="avatar" width="80" @error="onError"></van-image>
        </template>

        <template #title>
          <span class="title">登录 / 注册</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
//1.导入封装后的接口
import {getDetailByIdAPI} from '@/api/user.js';
import {getUserLocal, removeTokenLocal} from "@/utils/auth.js"

export default {
  data() {
    return {
      isLogin: false, //是否登录
      avatar_default: require('@/assets/images/avatar_default.png'), //默认头像
      avatar: null, //用户头像，
      user: {id: null, name: null},
      nick_name: null,
    };
  },

  //生命周期方法
  mounted() {
    this.isLogin = getUserLocal() ? true : false;
    //从本地存储获取用户id name
    //根据id向后端查询用户详情
    this.user = getUserLocal();
    this.avatar = this.avatar_default;
    if (this.isLogin) {
      //从后端取用户头像
      getDetailByIdAPI(this.user.id).then(result => {

        this.avatar = result.data.avatar;
      });
    }
    if (this.isLogin) {
      //从后端取用户昵称
      getDetailByIdAPI(this.user.id).then(result => {
        this.nick_name = result.data.nikename;

      });
    }
  },
  methods: {
    //点击用户退出事件
    onClickLogout() {
      removeTokenLocal();
      this.avatar = this.avatar_default;
      this.$toast('退出成功');
      this.isLogin = false;
    },
    onError() {
      console('onError 加载图片出错');
    }
  }
};
</script>

<style lang="less" scoped="scoped">
* {
  //background: rgba(200, 201, 204, 1);
}

.member {
  padding: 10px;

}

.title {
  padding-left: 30px;
  color: black;
  font-size: 24px;
  padding-bottom: 50px;
}

.van-avatar {
  margin-left: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.nick {
  color: darkgrey;
  font-size: 16px;
  margin-left: 30px;
}

::v-deep .operation {
  font-size: 19px;
  height: 55px;
  line-height: 30px;
}

.van-cell__left-icon {
  line-height: 30px;
  font-size: 24px;
}

.van-image__img {
  width: 200%;
}
</style>
